◀︎STUDY JavaScript_024-1 オーディオ・ファイルと楽譜3ページ

-----

エレメントと素材の確認 / Mozart_Sonata_12.mp3

動作とレイアウトの確認 / いろいろな表示方法を試してみる

サンプル - 1

最初は画像が表示されていない. ボタンを押すと楽譜が現れ, もう一度押すと消える.

サンプル - 2

最初から楽譜の1ページ目が表示されている. 2ページのボタンを押すと画像が次のページに入れ替わる. 全てのページに対してのボタンを用意することになるが, 目的のページに進むには便利.

サンプル - 3

最初から楽譜の1ページ目が表示されている. 次のページに進むには右のボタンを押す. もう一回押すと3ページ目に進み, 押すたびにこれらを繰り返す. そして左のボタンでバックができる.

サンプル - 4

最初は楽譜が表示されていない. ボタンを押すと楽譜が現れるが, この楽譜は画像ではなくデータです(音符をクリックすると赤くなる).

JavaScript

JavaScript 解説

function でぼたん() を定義する.
最初の「trigger」(トリガーはクリックされること/クリックで自動的に実行される処理)によって
「目印」が付けられている DOM (<main> タグから </main> タグまで) を盗んで「表示」という暗号に変える.
style display の値が「厳密等価チェック」( === オペランドが none と等しいかどうかのチェック)によって,
その答えが「ture」 (現在 style="display:none;"なので正しい)となるので,
style="display:none; を → display="block" に書き換えて, この DOM をHTMLに戻す.
表示された後に, 2回目の「トリガー」(クリック)があれば,
厳密等価のチェックによって答えが「false (虚偽)」となり,
style を display:none; に書き換えて, この DOM をHTMLに戻す.

-----

◀︎Contents　　　　　STUDY JavaScript_024-1